<template>
    <div id="mainer">
        <!--  管理账号列表  -->
        <div class="container">
            <div class="h2">管理员列表</div>
            <el-table class="table" :data="pager.data" >
                <el-table-column prop="aid" label="编号"></el-table-column>
                <el-table-column prop="uname" label="账号"></el-table-column>
                <el-table-column label="是否为超管">
                    <template slot-scope="scope">
                        <div class="tag" :class="{true:scope.row.is_admin,false:!scope.row.is_admin}">{{scope.row.is_admin ? '是':'否'}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <ul class="pager">
                <li :class="{disabled:pager.pno==1}" @click="prevPage">上一页</li>
                <li :class="{cur:pager.pno==p}" v-for="p in pager.pageCount" :key="p">{{p}}</li>
                <li :class="{disabled:pager.pno==pager.pageCount}" @click="nextPage">下一页</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pager:{
                    data:[] //存放数据
                }
            }
        },
        methods:{
            loadData(pno,pageNum){
                const url=`admin/adminlist?pno=${pno}&pageNum=${pageNum}`
                return new Promise((resolve,reject)=>{
                    this.axios.get(url)
                        .then(res => resolve(res.data))
                        .catch(err => reject(err))
                })
            },
            prevPage(){
                this.loadData(--this.pager.pno,5).then(res => this.pager=res)
            },
            nextPage(){
                this.loadData(++this.pager.pno,5).then(res => this.pager=res)
            }
        },
        mounted(){
            this.loadData(1,5).then(res => {
                this.pager=res
            })
        }
    }
</script>

<style lang="scss" scoped>
$text-color:#e6e9ed;
#mainer {
    margin: 0 30px;
    .container {
        .h2 {
            padding: 20px 30px;
            font-size: 1.5em;
            color: #73879c;
            border-bottom: 3px solid $text-color;
        }
        .table {
            width: 100%;
            margin-top: 10px;
            .tag {
                width: 50px;
                text-align: center;
                &.true {
                    color: #fff;
                    background-color: #1abb9c;
                }
                &.false {
                    color: #fff;
                    background-color: #f00;
                }
            }
        }
        .pager {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-top: 20px;
            li {
                padding: 5px 10px;
                border: 1px solid #dddddd;
                font-size: .9em;
                color: #1ABB9C;
                &.cur {
                    background-color: #1ABB9C;
                    color: #fff;
                    border: none;
                }
                &:hover {
                    cursor: pointer;
                }
                &.disabled {
                    color: #ccc;
                    pointer-events: none;
                }
            }
        }
    }
}
</style>